<template>
  <div class="nav-bar">
    <div class="nav-container" ref="userActive">
      <span class="active" @click="handleRecommend">推荐</span>
      <span @click="handleRankingList">排行榜</span>
      <span @click="handleSongSheet">歌单</span>
      <span @click="handleDjradio">主播电台</span>
      <span @click="handleArtist">歌手</span>
      <span @click="handleNewDisc">新碟上架</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
    }
  },
  methods: {
    handleRecommend(e) {
      this.$router.push('/homesong/recommend')
      this.$refs.userActive.childNodes.forEach((item) => {
        item.setAttribute('class', '')
      })
      e.target.setAttribute('class', 'active')
    },
    handleRankingList(e) {
      // console.log(111);
      this.$router.push('/homesong/rankinglist')
      this.$refs.userActive.childNodes.forEach((item) => {
        item.setAttribute('class', '')
      })
      e.target.setAttribute('class', 'active')
    },
    handleSongSheet(e) {
      this.$router.push('/homesong/songsheet')
      this.$refs.userActive.childNodes.forEach((item) => {
        item.setAttribute('class', '')
      })
      e.target.setAttribute('class', 'active')
    },
    handleDjradio(e) {
      this.$router.push('/homesong/djradio')
      this.$refs.userActive.childNodes.forEach((item) => {
        item.setAttribute('class', '')
      })
      e.target.setAttribute('class', 'active')
    },
    handleArtist(e) {
      this.$router.push('/homesong/artist')
      this.$refs.userActive.childNodes.forEach((item) => {
        item.setAttribute('class', '')
      })
      e.target.setAttribute('class', 'active')
    },
    handleNewDisc(e) {
      this.$router.push('/homesong/newdisc')
      this.$refs.userActive.childNodes.forEach((item) => {
        item.setAttribute('class', '')
      })
      e.target.setAttribute('class', 'active')
    }
  }
}
</script>

<style scoped>
.nav-bar {
  background-color: #c20c0c;
  margin: 0 auto;
  text-align: center;
  line-height: 34px;
}
.nav-container {
  width: 754px;
  display: flex;
  /* background-color: aqua; */
  margin: 0 auto;
  justify-content: space-evenly;
}

.nav-container span {
  color: aliceblue;
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
}
.nav-container span:hover {
  background-color: #9b0909;
  cursor: default;
  cursor: pointer;
}
.active {
  background-color: #9b0909;
}
</style>
